<template>
  <div class="movies">
    <ul>
      <li
        v-for="(item, index) in movieList"
        :key="index"
        @click="gotoDetail(item.movieid)"
      >
        <img :src="item.img | formaturl" alt="" />
        <div class="info">
          <div class="left">
            <h5>{{ item.nm }}</h5>
            <div>
              <p v-if="item.sc">
                观众评分:<span>{{ item.sc }}</span>
              </p>
              <p v-if="item.sc == 0">暂无评分</p>
              <p v-if="item.showst === 4" class="p1">{{ item.wish }}人想看</p>
              <span>主演:{{ item.star }}</span>
              <p class="showInfo">{{ item.showInfo }}</p>
            </div>
          </div>
          <div class="right">
            <span v-if="item.showst === 3" class="span1">购票</span>
            <span v-else-if="item.showst === 4" class="span2">预售</span>
          </div>
        </div>
      </li>
    </ul>
    <p v-if="done" class="more">没有更多了</p>
  </div>
</template>

<script>
import { moviesApi, loadMoreApi } from "@/utils/api";

export default {
  props: ["num"],
  data() {
    return {
      movieList: [],
      //所有电影的ID
      ids: [],
      //每次上拉加载多少条
      size: 6,
      //从第几个索引开始截取
      startId: 0,
      done: false,
    };
  },
  watch: {
    async num() {
      // 将这一次需要的id截取到一个数组里面
      const arr = this.ids.slice(this.startId, this.startId + this.size);
      // console.log(arr);
      const str = arr.join(",");
      // 请求上拉加载更多的数据
      const res = await loadMoreApi({
        ids: str,
      });
      if (res.status === 0) {
        this.movieList = this.movieList.concat(res.result);
        this.startId = this.startId + res.result.length;
        await this.$nextTick();
        this.$emit("refresh", this.movieList.length >= this.ids.length);
        if (this.movieList.length >= this.ids.length) {
          this.done = true;
        }
      }
    },
  },
  filters: {
    formaturl(val) {
      // val  https://p1.meituan.net/w.h/movie/13cb85d810b0530b951625430c2f35044951112.jpg
      return val.split("w.h").join("64.95");
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      // 第一次获取电影列表
      const res = await moviesApi();
      if (res.status === 0) {
        this.movieList = res.result;
        this.ids = res.ids;
        this.startId = this.movieList.length;
        // 请求结束以后通知父组件要去加better-scroll了
        await this.$nextTick();
        this.$emit("get-data-end");
      }
    },
    gotoDetail(id) {
      this.$router.push("/detail/" + id);
    },
    // getList() {
    //   fetch("http://www.pudge.wang:3080/api/movies/list")
    //     .then((response) => response.json())
    //     .then(async (res) => {
    //       console.log(res);
    //       if (res.status === 0) {
    //         this.movieList = res.result;

    //         // 请求结束以后通知父组件要去加better-scroll了
    //         await this.$nextTick();
    //         this.$emit("get-data-end");
    //       }
    //     });
    // },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.movies {
  width: 100%;
  background: #fff;

  li {
    padding: 15px 10px;
    height: 105x;
    border-bottom: 1px solid @border-color;
    display: flex;
    > img {
      display: block;
      width: 64px;
      height: 80px;
      margin-right: 10px;
    }
  }
  .info {
    width: 100%;
    border-bottom: @border-color;
    display: flex;
    justify-content: space-between;
    .left {
      h5 {
        font-size: 17px;
        margin-bottom: 5px;
      }
      div {
        display: flex;
        flex-direction: column;

        p {
          font-size: 13px;
          color: #666;

          span {
            color: orange;
            font-weight: 600;
            font-size: 15px;
          }
        }
        span {
          margin: 5px 0;
          font-size: 13px;
        }
        .p1 {
          color: orange;
          font-weight: 600;
        }
      }
    }
    .right {
      .center();
      .span1 {
        .center();
        color: #fff;
        width: 42px;
        height: 27px;
        background: @theme-color;
        font-size: 18px;
        border-radius: 5px;
        font-size: 12px;
      }
      .span2 {
        .center();
        width: 42px;
        height: 27px;
        background: #3c9fe6;
        color: #fff;
        font-size: 18px;
        border-radius: 5px;
        font-size: 12px;
      }
    }
  }
  .more {
    text-align: center;
    font-size: 26px;
    color: #666;
  }
}
</style>
